$footer-height: 53px;
$sm-font-size: 16px;
a {
  color: #000;
  text-decoration: none;
}

.title {
  font-size: 34pt;
}

//制作透明化tabs时需要
.has-tabs {
  //bottom: 0;
}

.tab-nav {
  background-color: rgba(255, 255, 255, 1);
  height: 52px;
  padding: 4px 0;
}
.border-bottom {
  border-bottom: solid 1px;
}

@for $i from 1 to 101 {
  .col-#{$i} {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 $i+0%;
    -moz-box-flex: 0;
    -moz-flex: 0 0 $i+0%;
    -ms-flex: 0 0 $i+0%;
    flex: 0 0 $i+0%;
    　max-width: $i+0%;
  }
}

@for $i from 1 to 101 {
  .col-offset-#{$i} {
    margin-left: $i + 0%;
  }
}

//初始化padding和margin值为0
.row {
  .span {
    margin: 0;
  }
  p {
    margin: 0;
  }
  .col {
    overflow: hidden;
  }
  .big-font {
    //padding-top: 10px;
    //margin-top: 10px;
    font-size: 2em;
  }
  //布局
  .align-right {
    text-align: right;
  }
  .align-center {
    text-align: center;
  }
  .align-left {
    text-align: left;
  }

  //消除按钮margin值
  .button {
    margin-top: 0;
    margin-bottom: 0;
  }
}

//让元素并为一行
.one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row + .row {
  margin-top: 0px;
}

.bottom-blank {
  height: 47px;
  width: 1px;
}

//button去掉边框,button内的img居中
.center-btn {
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  img {
    align-self: center;
    height: 25px;
  }
}

//字体删除线
.line-through {
  text-decoration: line-through;
}

@mixin display-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin flex-direction($value: row) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -moz-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

@mixin align-self($value: auto) {
  -webkit-align-self: $value;
  -moz-align-self: $value;
  @if $value == flex-start {
    -ms-flex-item-align: start;
  } @else if $value == flex-end {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }
  align-self: $value;
}

.align-center-content {
  @include display-flex();
}

.align-center-content-right {
  @include display-flex();
  @include flex-direction(row-reverse);
}

.align-self-center {
  @include align-self(center);
}

.align-self-up {
  @include align-self(flex-start);
}

.align-self-down {
  @include align-self(flex-end);
}

//底部空白blank
.bottom-blank {
  height: $footer-height;
  width: 1px;
}

// 底部的下一步按钮
.bar.bar-footer {
  height: $footer-height;
  background: #f0f0f0;
  button {
    border-radius: 5px;
    background: #ffffff;
  }
  background-position: bottom;
}

//垂直居中
.v-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

//底部按钮,左字右文-|
.bar.bar-split {
  background-color: #e8e8e8;
  border-top: 1px solid #cbcbcb;
  .content-left {
    float: left;
    left: 10px;
    position: absolute;
    width: 50%;
  }

  .text-down-wrap{
    position: relative;
    height: $footer-height - 10px;
  }

  .text-up{
    position: absolute;
    top:0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-down{
    bottom:0px;
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  p {
    margin: 0;
  }
  .amount {
    font-size: 20px;
  }
  .red {
    color: #ff0000;
  }
  .content-right {
    float: right;
    width: 40%;
    right: 8px;
    position: absolute;
  }
}

ion-spinner {
  display: block;
  height: 28px;
}
@-webkit-keyframes delay-display {
  0% { opacity: 0;}
  100% {opacity: 1;}
}
.bar.bar-calm{
  border-color: #c32506;
  background-color: #c32506;
  background-image: linear-gradient(0deg,#c32506,#c32506 50%,transparent 50%);
  color: #fff;
}
.button.button-positive,.button.button-positive.activated {
  border-color: #c32506;
  background-color: #c32506;
  color: #fff;
}
.wf-icon {
  width: 18px;
  height: 18px;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  margin-right: 10px;
  background-size: contain;
}
.no-content{
  width: 60%;

  margin: 40px 20% 0;
}
button.clean {
  background-image: url(img/login/clean.png);
  position: absolute;
  top: 12.5px;
  right: 0px;
  z-index: 99;
}


